<template>
    <div class="w-vw-100 text-center">
        <el-button plain size="large" type="success"  @click="showInput = true">加入房间</el-button>
    </div>

    <el-dialog v-model="showInput" title="加入房间" width="500" align-center>
        <el-form ref="roomFrom" :model="form">
            <el-form-item label="请输入房间号" label-width="140px">
                <el-input v-model="form.room_id" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="showInput = false">取消</el-button>
                <el-button type="primary" @click="handleClick">
                    加入
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import {defineComponent} from 'vue'
import {ElButton, ElDialog, ElMessage, ElInput, ElFormItem, ElForm} from 'element-plus'
import axios from "axios";

export default defineComponent({
    data(){
        return {
            room_id: '',
            showInput: false,
            form: {
                room_id: '',
            },
        }
    },
    components:{
        ElButton,
        ElDialog,
        ElInput,
        ElFormItem,
        ElForm,
    },
    methods: {
        async handleClick(){
            this.showInput = false;
            try {
                this.$refs.roomFrom.resetFields();
                let config = {
                    headers: {
                        token: this.$common.getSessionStorageValues('tokenData.token'),
                        refreshtoken: this.$common.getSessionStorageValues('tokenData.refreshtoken')
                    }
                };
                // 发送登录请求
                const response = await axios.post('/api/joinroom', {room_id: this.form.room_id}, config);
                // 判断登录结果
                if (response.data.code === 200 && response.status === 200) {
                    this.$common.setSessionStorageValues('roomInfo', response.data.data);
                    ElMessage({
                        message: response.data.msg,
                        type: 'success',
                    })
                    this.$router.replace('/gamematch2');
                } else {
                    ElMessage({
                        message: response.data.msg,
                        type: 'warning',
                    })
                }
            } catch (error) {
                // 发生错误
                ElMessage.error('加入房间出错啦')
                console.error(error);
                // 执行其他错误处理操作...
            }
        },
    }
})
</script>

<style scoped lang="scss">

</style>